import SchoolLogo from '../../../../../config/logos/SchoolLogo';
import './css/style.css';
import {useEffect, useState} from "react";
import {CompareSubject} from "@/services/Province/Dashboard";
import {history} from "umi";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import {Button, Space} from "antd";

export default () => {
  // const data = {
  //   status: 0,
  //   subjects: [
  //     { school: '南昌大学', subject: '计算机科学与技术' },
  //     { school: '江西财经大学', subject: '软件工程' },
  //     { school: '江西农业大学', subject: '网络安全' },
  //   ],
  //   data: [
  //     {
  //       name: '学科建设进展',
  //       datas: [
  //         ['学科评估情况', '第四轮评估：B', '第四轮评估：B', '第四轮评估：B'],
  //         ['学科影响力情况', '软科排名：21', '软科排名：21', '软科排名：21'],
  //         ['本学科建设经费数额（万元）', '100', '100', '100'],
  //       ],
  //     },
  //     {
  //       name: '培养拔尖创新人才',
  //       datas: [
  //         ['国家级教学成果奖数量（项）', '100', '100', '100'],
  //         ['国家级一流课程建设数（个）', '4', '4', '4'],
  //         ['国家级人才培养平台/基地（个）', '2', '2', '2'],
  //         ['给本科生上课的正教授数量（位）', '900', '900', '900'],
  //         ['年度授予博士学位数量', '100', '100', '100'],
  //       ],
  //     },
  //     {
  //       name: '建设一流师资队伍',
  //       datas: [
  //         ['国家级团队数量（个）', '90', '80', '90'],
  //         ['国家级学术领军人才（含青年人才）数量（位）', '90', '80', '90'],
  //         ['学科专任教师数量(位)', '430', '500', '550'],
  //         ['博士后和科研助理数量（位）', '80', '100', '95'],
  //         ['本学科建设经费数额（万元）', '100', '100', '100'],
  //         ['教师担任国内外重要期刊负责人数量（位）', '540', '490', '320'],
  //         ['教师在国内外重要学术组织任职主要负责人数量（位）', '540', '760', '320'],
  //         ['教师参加本领域重要学术会议并作报告人员数量（位）', '670', '430', '540'],
  //         ['教师担任国际比赛评委、裁判人员数量（位）', '670', '670', '670'],
  //       ],
  //     },
  //     {
  //       name: '科学研究',
  //       datas: [
  //         ['教师获国家级奖项数量（项）', '155', '180', '125'],
  //         ['国内外顶级期刊发表论文数量（篇）', '195', '132', '155'],
  //         ['承担国内外重大设计与展演任务数量（个）', '120', '115', '100'],
  //         ['主持国家重点重大项目数量（项）', '20', '14', '16'],
  //         ['纵向到校科研经费（万元）', '80', '80', '80'],
  //         ['横向到校科研经费（万元）', '50', '50', '50'],
  //       ],
  //     },
  //     {
  //       name: '社会服务',
  //       datas: [
  //         ['成果到校金额（万元）', '100', '100', '100'],
  //         ['国家级产教融合平台建设（个）', '15', '15', '15'],
  //         ['国家领导人肯定性批示（条）', '10', '10', '10'],
  //       ],
  //     },
  //     // {
  //     //   name: "培养拔尖创新人才",
  //     //   datas: [
  //     //     ['教学成果奖数', '国家级教学成果奖：100', '国家级教学成果奖：100', '国家级教学成果奖：100'],
  //     //     ['专业与课程建设', '国家级一流课程建设数：4', '国家级一流课程建设数：4', '国家级一流课程建设数：4'],
  //     //     ['人才培养平台/基地建设', '国家级人才培养平台/基地：2', '国家级人才培养平台/基地：2', '国家级人才培养平台/基地：2'],
  //     //     ['教师情况', '正教授：900人', '正教授：900人', '正教授：900人'],
  //     //   ]
  //     // },
  //   ],
  // };

  // 请求数据
  const [data, setData] = useState({
    status: 0,
    subjects: [],
    data: []
  })
  const [reload, setReload] = useState(false)
  useEffect(() => {
    const url = history.location.pathname.split('/')
    console.log("@url length", url.length)
    if (url.length !== 5) {
      history.goBack()
      return
    }
    const params = url[url.length - 1].split('_')
    console.log("@params", params)
    CompareSubject({params}).then(res => {
      console.log(res)
      if (res.status === 0) {
        setData(res)
      }
    })
  }, [reload])

  const download = () => {
    const element = document.getElementById('demo');  // 这个dom元素是要导出的pdf的div容器
    const w = element.offsetWidth;  // 获得该容器的宽
    const h = element.offsetHeight;  // 获得该容器的高
    const offsetTop = element.offsetTop; // 获得该容器到文档顶部的距离
    const offsetLeft = element.offsetLeft; // 获得该容器到文档最左的距离
    const canvas = document.createElement("canvas");
    let abs = 0;
    const win_i = document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
    const win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
    if(win_o > win_i){
      abs = (win_o - win_i) / 2; // 获得滚动条宽度的一半
    }
    canvas.width = w * 2; // 将画布宽&&高放大两倍
    canvas.height = h * 2;
    const context = canvas.getContext('2d');
    context.scale(2, 2);
    context.translate(-offsetLeft - abs, -offsetTop);
    // 这里默认横向没有滚动条的情况，因为offset.left()，有无滚动条的时候存在差值，因此translate的时候，要把这个差值去掉
    html2canvas(element, {
      allowTaint: true,
      scale: 2 // 提升画面质量，但是会增加文件大小
    }).then( canvas => {
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      // 一页pdf显示html页面生成的canvas高度
      const pageHeight = contentWidth / 592.28 * 841.89;
      // 未生成pdf的html页面高度
      let leftHeight = contentHeight;
      // 页面偏移
      let position = 0;
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 595.28;
      const imgHeight = 592.28 / contentWidth * contentHeight;

      const pageDate = canvas.toDataURL('image/jpeg', 1.0);

      const pdf = new jsPDF('', 'pt', 'a4');
      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面的高度（841.89）
      // 当内容未超过pdf一页显示的范围，无需分页
      if(leftHeight < pageHeight) {
        pdf.addImage(pageDate,'JPEG', 0, position, imgWidth, imgHeight);
      }else { // 分页
        while (leftHeight > 0){
          pdf.addImage(pageDate, 'JPEG', 0, position, imgWidth, imgHeight)
          leftHeight -= pageHeight;
          position -= 841.89;
          // 避免添加空白页
          if(leftHeight > 0){
            pdf.addPage()
          }
        }
      }

      pdf.save('学科对比情况.pdf');
    })

  }


  return (
    <>
      <div className="duibi_wrap__fOuDx">
        <div id="demo" style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{width: "100%"}} className="duibi_wrap__fOuDx">
            <div className="Table_params__NIEmu">
              <div className="Table_choice__es_y_">
                <div className="Table_title__3M8_j"></div>

                {/* 渲染学校logo */}
                {data.subjects.map((item) => {
                  return (
                    <div className="Table_item__ARYWW">
                      <p style={{ marginBottom: 0 }}>
                        <img
                          src={SchoolLogo[item.school]}
                          style={{ width: 20, height: 20, marginBottom: 4 }}
                        />{' '}
                        {item.school}
                      </p>
                      <p style={{ marginBottom: 0 }}>{item.subject}</p>
                    </div>
                  );
                })}
              </div>

              {/* 渲染列表内容 */}
              {data.data.map((item) => {
                let s = (i) => {
                  return item.datas[i].map((item, idx) => {
                    if (idx === 0) {
                      return (
                        <>
                          <div className="Table_title__3M8_j">{item}</div>
                        </>
                      );
                    } else {
                      return (
                        <>
                          <div className="Table_item__ARYWW">
                            {item.award && <img src="/icons/award.png" style={{width: 15, marginRight: 3}}/>}
                            {(item.value || item.value === 0) && item.value}
                            {!item.value && item.value !== 0 && "/"}
                          </div>
                        </>
                      );
                    }
                  });
                };
                let subjects = item.datas.map((_, idx) => {
                  return <div className="Table_list__bASUn">
                    {s(idx)}
                  </div>;
                });
                return (
                  <>
                    <div className="Table_caption__shFqZ">
                      <div className="Table_title__3M8_j">{item.name}</div>
                      <div className="Table_item__ARYWW"></div>
                    </div>
                    {subjects}
                  </>
                );
              })}

              {/*<div className="Table_caption__shFqZ">*/}
              {/*  <div className="Table_title__3M8_j">动力传输</div>*/}
              {/*  <div className="Table_item__ARYWW"></div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">变速器</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">离合器</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片滑动离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">传动方式</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">动力挡位</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*</div>*/}

              {/*<div className="Table_caption__shFqZ">*/}
              {/*  <div className="Table_title__3M8_j">动力传输</div>*/}
              {/*  <div className="Table_item__ARYWW"></div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">变速器</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">离合器</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片滑动离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">传动方式</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">动力挡位</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*</div>*/}

              {/*<div className="Table_caption__shFqZ">*/}
              {/*  <div className="Table_title__3M8_j">动力传输</div>*/}
              {/*  <div className="Table_item__ARYWW"></div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">变速器</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">离合器</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片滑动离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">传动方式</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">动力挡位</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*</div>*/}

              {/*<div className="Table_caption__shFqZ">*/}
              {/*  <div className="Table_title__3M8_j">动力传输</div>*/}
              {/*  <div className="Table_item__ARYWW"></div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">变速器</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">离合器</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片滑动离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">传动方式</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">动力挡位</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*</div>*/}

              {/*<div className="Table_caption__shFqZ">*/}
              {/*  <div className="Table_title__3M8_j">动力传输</div>*/}
              {/*  <div className="Table_item__ARYWW"></div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">变速器</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">离合器</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片滑动离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">传动方式</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">动力挡位</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*</div>*/}

              {/*<div className="Table_caption__shFqZ">*/}
              {/*  <div className="Table_title__3M8_j">动力传输</div>*/}
              {/*  <div className="Table_item__ARYWW"></div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">变速器</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">离合器</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片滑动离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">传动方式</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">动力挡位</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*</div>*/}

              {/*<div className="Table_caption__shFqZ">*/}
              {/*  <div className="Table_title__3M8_j">动力传输</div>*/}
              {/*  <div className="Table_item__ARYWW"></div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">变速器</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*  <div className="Table_item__ARYWW">国际6挡</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">离合器</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片滑动离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*  <div className="Table_item__ARYWW">湿式多片离合</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">传动方式</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链传动</div>*/}
              {/*  <div className="Table_item__ARYWW">链条传动</div>*/}
              {/*</div>*/}
              {/*<div className="Table_list__bASUn">*/}
              {/*  <div className="Table_title__3M8_j">动力挡位</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*  <div className="Table_item__ARYWW">-</div>*/}
              {/*</div>*/}
            </div>
          </div>
        </div>
      </div>
      <div style={{textAlign: "center", paddingTop: 20}}>
        <Space>
          <Button type="primary" onClick={download}>生成报告</Button>
          <Button type="default" onClick={() => history.goBack()}>返回</Button>
        </Space>
      </div>
    </>
  );
};
